﻿<Helpers:LayoutAwarePage
    xmlns:Helpers="using:JumpstartApp.Helpers"
    xmlns:media="using:Microsoft.PlayerFramework"
    xmlns:Models="using:JumpstartApp.Models" 
    xmlns:Controls="using:JumpstartApp.Controls"
    xmlns:ViewModels="using:JumpstartApp.ViewModels"
    xmlns:JumpstartApp="using:JumpstartApp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:JumpstartApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:converters="using:JumpstartApp.Converters"
    x:Name="pageRoot"
    x:Class="JumpstartApp.Views.Detail"
    mc:Ignorable="d">
    <Helpers:LayoutAwarePage.Resources>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <converters:ReverseBooleanToVisibilityConverter x:Key="ReverseBooleanToVisibilityConverter"/>
    </Helpers:LayoutAwarePage.Resources>

    <Helpers:LayoutAwarePage.DataContext>
        <ViewModels:DetailViewModel/>
    </Helpers:LayoutAwarePage.DataContext>

    <Helpers:LayoutAwarePage.BottomAppBar>
        <AppBar Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                IsOpen="True"
                x:Name="DetailAppBar">
            <Grid>
                <StackPanel Orientation="Horizontal" 
                            HorizontalAlignment="Right"
                            x:Name="RightAppBarStackPanel">
                    <Button Style="{StaticResource PinAppBarButtonStyle}"
                            Command="{Binding PinCommand}"
                            CommandParameter="{Binding RelativeSource={RelativeSource Self}}"
                            x:Uid="DetailPin"
                            Visibility="{Binding ShowPinButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <Button Style="{StaticResource UnpinAppBarButtonStyle}"
                            Command="{Binding PinCommand}"
                            CommandParameter="{Binding RelativeSource={RelativeSource Self}}"
                            x:Uid="DetailUnpin"
                            Visibility="{Binding ShowPinButton, Converter={StaticResource ReverseBooleanToVisibilityConverter}}"/>
                    <Button Style="{StaticResource AppBarButtonStyle}"
                            AutomationProperties.Name="Print (dev)"
                            Command="{Binding PrintCommand}"
                            x:Uid="DetailPrint">&#xE160;</Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Helpers:LayoutAwarePage.BottomAppBar>


    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid x:Name="FillView">
            <Controls:Silhouette Title="{Binding Parent.Title}" SubTitle=" " x:Name="MySilhouette" />
            <Controls:GridView Margin="0,140,0,0" Padding="120,0,80,80" ItemsSource="{Binding Children}" 
                      SelectedItem="{Binding Selected, Mode=TwoWay}"
                      ItemTemplate="{StaticResource ChildTemplate}">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid ItemHeight="1" ItemWidth="1" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.Header>
                    <StackPanel Orientation="Horizontal" Margin="0,0,40,0">
                        <StackPanel Width="512" Margin="0,0,40,0">
                            <media:MediaPlayer x:Name="MyMediaPlayerLandscape" Height="287" Width="512" AutoPlay="False" AutoLoad="False" Background="Black"
                           PosterSource="{Binding Child.Image}" Source="{Binding Child.Video}" IsFullScreenVisible="True" />
                            <TextBlock TextWrapping="Wrap" Text="{Binding Child.Title}" Style="{StaticResource TitleTextStyle}" />
                            <TextBlock Margin="0,10,0,0" Style="{StaticResource BasicTextStyle}" Foreground="#FF9AC989">
                            <Run Text="{Binding Child.Date}" /><Run Text="{Binding Parent.Date}" />
                            </TextBlock>
                            <TextBlock TextWrapping="Wrap" Style="{StaticResource CaptionTextStyle}" MaxHeight="115" Text="{Binding Child.Description}"/>
                        </StackPanel>
                        <StackPanel>
                            <TextBlock x:Uid="DetailNotesTitle" Margin="0,0,0,5" Style="{StaticResource GroupHeaderTextStyle}">Notes</TextBlock>
                            <Controls:BindableTextBox Height="390" Width="300" BindableText="{Binding Notes, Mode=TwoWay}"
                                                      TextWrapping="Wrap"/>
                        </StackPanel>
                    </StackPanel>
                </GridView.Header>
            </Controls:GridView>

            <Controls:BackButton />
        </Grid>

        <Grid x:Name="PortraitView" Visibility="Collapsed">
            <Controls:Silhouette Title="Paused" SubTitle=" " />
            <Controls:GridView Margin="0,140,0,0" Padding="120,0,80,80" ItemsSource="{Binding Children}" 
                               ScrollViewer.VerticalScrollBarVisibility="Auto"
                      SelectedItem="{Binding Selected, Mode=TwoWay}"
                      ItemTemplate="{StaticResource ChildTemplate}">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid ItemHeight="1" ItemWidth="1" Orientation="Horizontal" Width="525" HorizontalAlignment="Left" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.Header>
                    <StackPanel Width="512" Margin="0,0,0,40">
                        <media:MediaPlayer x:Name="MyMediaPlayerPortrait" Height="287" Width="512" AutoPlay="False" AutoLoad="False" Background="Black"
                           PosterSource="{Binding Child.Image}" Source="{Binding Child.Video}" IsFastForwardVisible="True" />
                        <TextBlock TextWrapping="Wrap" Text="{Binding Child.Title}" Style="{StaticResource TitleTextStyle}" />
                        <TextBlock Margin="0,10,0,0" Style="{StaticResource BasicTextStyle}" Text="{Binding Parent.Date}" Foreground="#FF9AC989" />
                        <TextBlock TextWrapping="Wrap" Style="{StaticResource CaptionTextStyle}" MaxHeight="115" Text="{Binding Child.Description}"/>
                    </StackPanel>
                </GridView.Header>
            </Controls:GridView>

            <Controls:BackButton />
        </Grid>

        <Grid x:Name="SnapView" Visibility="Collapsed">
            <Controls:Silhouette Title=" " SubTitle=" " />
            <TextBlock Style="{StaticResource PageHeaderTextStyle}" VerticalAlignment="Top" Margin="40">
            	<Run Text="Module"/>
            </TextBlock>
            <Button Style="{StaticResource PlayAppBarButtonStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" x:Name="PlaySnappedButton" Click="PlaySnappedButton_Click_1">
                <Button.RenderTransform>
                    <CompositeTransform ScaleX="3" ScaleY="3"/>
                </Button.RenderTransform>
            </Button>
        </Grid>


        <Canvas x:Name="PrintContainer" Opacity="0"/>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Filled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Helpers:LayoutAwarePage>